1import {useState, useReducer, PropsWithChildren} from 'react';
  2import Box from '@mui/material/Box';
  3import {getSession, useSession} from 'next-auth/react';
  4import TravelColumns from '../../../containers/TravelColumns';
  5import NewTravelDialog from '../../../containers/NewTravelDialog';
  6import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
  7import pageUtils from '../../../lib/pageUtils';
  8import EventLayout, {TabComponent} from '../../../layouts/Event';
  9import {
 10  EventByUuidDocument,
 11  FindUserVehiclesDocument,
 12  VehicleEntity,
 13  useFindUserVehiclesQuery,
 14} from '../../../generated/graphql';
 15import {getLocaleForLang} from '../../../lib/getLocale';
 16
 17interface Props {
 18  eventUUID: string;
 19  announcement?: string;
 20}
 21
 22const Page = (props: PropsWithChildren<Props>) => {
 23  return <EventLayout {...props} Tab={TravelsTab} />;
 24};
 25
 26const TravelsTab: TabComponent<Props> = () => {
 27  const session = useSession();
 28  const [openNewTravelDialog, setNewTravelDialog] = useState(false);
 29  const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
 30  const [selectedVehicle, setSelectedVehicle] = useState<VehicleEntity>();
 31
 32  const isAuthenticated = session.status === 'authenticated';
 33  const {data} = useFindUserVehiclesQuery({
 34    skip: !isAuthenticated,
 35  });
 36  const vehicles = data?.me?.profile?.vehicles?.data || [];
 37
 38  const addTravelClickHandler =
 39    isAuthenticated && vehicles?.length != 0
 40      ? toggleVehicleChoice
 41      : () => setNewTravelDialog(true);
 42
 43  return (
 44    <Box>
 45      <TravelColumns showTravelModal={addTravelClickHandler} />
 46      <NewTravelDialog
 47        key={selectedVehicle?.id || 'noVehicle'}
 48        opened={openNewTravelDialog}
 49        toggle={() => setNewTravelDialog(false)}
 50        selectedVehicle={selectedVehicle}
 51      />
 52      <VehicleChoiceDialog
 53        open={openVehicleChoice}
 54        toggle={toggleVehicleChoice}
 55        setNewTravelDialog={setNewTravelDialog}
 56        setSelectedVehicle={setSelectedVehicle}
 57        vehicles={vehicles}
 58      />
 59    </Box>
 60  );
 61};
 62
 63export const getServerSideProps = pageUtils.getServerSideProps(
 64  async (context, apolloClient) => {
 65    const {uuid} = context.query;
 66    const {host = ''} = context.req.headers;
 67    const session = await getSession(context);
 68    let event = null;
 69
 70    // Fetch event
 71    try {
 72      const {data} = await apolloClient.query({
 73        query: EventByUuidDocument,
 74        variables: {uuid},
 75      });
 76      event = data?.eventByUUID?.data;
 77    } catch (error) {
 78      return {
 79        notFound: true,
 80      };
 81    }
 82
 83    // Fetch user vehicles
 84    if (session)
 85      await apolloClient.query({
 86        query: FindUserVehiclesDocument,
 87      });
 88
 89    const description = await getLocaleForLang(
 90      event?.attributes?.lang,
 91      'meta.description'
 92    );
 93
 94    return {
 95      props: {
 96        eventUUID: uuid,
 97        metas: {
 98          title: event?.attributes?.name || '',
 99          description,
100          url: `https://${host}${context.resolvedUrl}`,
101        },
102      },
103    };
104  }
105);
106
107export default Page;